<template>
    <div class="goods">
        <!-- 购物详情 -->
        <el-button type="primary" class="My_history" onclick="javascript:history.go(-1)">返回</el-button>
        <div class="goodsContent">
            <div v-if="showContext" style="width: 100%;">
                <el-skeleton style="width: 100%;display: flex;align-items: end;">
                    <template #template>
                    <el-skeleton-item variant="image" style="width: 33%;height: 400px;" />
                    <div style="padding: 14px;float: left;    width: 40%;">
                        <el-skeleton-item variant="p" style="width: 50%" />
                        <div
                        style="display: flex;align-items: center;justify-items: space-between;">
                        <el-skeleton-item variant="text" style="margin-right: 16px" />
                        <el-skeleton-item variant="text" style="width: 30%" />
                        </div>
                    </div>
                    </template>
                </el-skeleton>
            </div>
            <div v-else style="display: flex;justify-content: center;flex-wrap: wrap;align-items: end;">
                <div class="goods_img">
                    <img :src="goodsInfo.pictureBase64" />
                </div>
                <div class="goods_info">
                    <div class="goods_name">{{ goodsInfo.name }}</div>    
                    <div class="goods_count">
                        <div class="goods_count_price">价格：{{ goodsInfo.price }}</div>
                        <div class="goods_count_">购买数量：<el-input-number v-model="countBuy" :min="1" :max="goodsInfo.count" @change="addCountBuy" /></div>
                    </div>    
                    <div class="goods_integral">
                        <p>积分：<span v-if="userinfo">{{ userinfo.integral }}</span><span v-else>---</span></p>
                        <p style="margin-left: 10px;" v-if="goodsInfo && goodsInfo.brand">品牌：<span>{{ goodsInfo.brand }}</span></p>
                    </div>
                    <div class="goods_addr">
                        <p>目的地：{{ userMessage.address }}</p>
                    </div>
                    <div class="goods_pay">需支付：<span style="color: #ff1a1a;font-size: 18px;">{{ pay_price }}￥</span></div>
                    <div>
                        <!-- <el-button type="primary" @click="nowPay()">直接购买</el-button> -->
                        <el-button type="primary" @click="addCart(0)">加入购物车</el-button>
                    </div>
                    <span style="color: rgb(142 136 136);font-size: 12px;margin-top: 12px;">须知：积分以2000为上限，当积分大于2千时，按2千算，当不足两千时按照当前积分算</span>
                </div>
                <div style="width: 89%;color: #666;margin-top: 10px;">商品详情：<span style="font-size: 19px;color: #000;">{{goodsInfo.descrs}}</span></div>
            </div>
        </div>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage  } from 'element-plus'
import utils from '@/util/utils'
export default defineComponent({
    data(){
        return{
            userMessage:null,
            userinfo:null,
            goodsInfo:null,
            goodsId:0,
            showContext:true,
            countBuy:1,
            pay_price:0
        }
    },
    setup() {
        // 路由
        const router = useRouter();
        const route = useRoute();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            router,
            store
        } 
    },
    created () {
        this.userMessage = this.store.state.UserMessage;
        this.goodsId = this.store.state.basicGoodsId;
        if(this.goodsInfo!=null)  this.showContext = false;
        if(this.goodsId==undefined) return;
        this.loadData();
    },
    methods:{
        loadData(){
            let self = this;
            self.$http.get(`${self.baseUrl}/goods/selectId?id=${this.goodsId}`).then(res=>{
                self.goodsInfo = res.data;
                self.pay_price = res.data.price;
                self.showContext = false;
            })
            self.$http.get(`${self.baseUrl}/user/selectUid?id=${this.userMessage.Id}`).then(res=>{
                self.userinfo = res.data;
            })
        },
        addCart(s){
            let self = this;
            if(self.goodsInfo.salesStatus != 0){
                ElMessage({
                    message:"不在销售中...",
                    type:'warning'
                })
                return;
            }
            if(self.userMessage==null || self.userMessage.address == undefined){
                ElMessage({
                    message:"请完善信息个人和地址信息",
                    type:'warning'
                })
                return;
            }
            let row = {
                "sid":this.goodsInfo.id,
                "countBuy":this.countBuy,
                "price":this.goodsInfo.price,
                "uid":this.userMessage.Id,
                "buyState":s
            }
            self.$http.post(`${self.baseUrl}/cart/addcart`,row).then(res=>{
                if(res.data !=0){
                    ElMessage({
                        message:"添加成功",
                        type:'success'
                    })
                }
            })
        },
        nowPay(){
            // 立即购买
            let self = this;
            console.log(utils.useIntegral(self.userinfo.integral));
            ElMessage({
                message:"暂无功能，先添加购物车",
                type:'warning'
            })
        },
        addCountBuy(){
            this.pay_price = this.goodsInfo.price * this.countBuy;
        }
    }
})
</script>
<style scoped>
    .My_history{
        display: inline-block;
        margin-right: 10px;
    }
    .goodsContent{
        margin-top: 20px;
        overflow: hidden;
        padding-left: 40px;
        display: flex;
        justify-content: center;
        align-content: space-between;
        align-items: end;
    }
    .goods_img{
        width: 36%;
        border-radius: 10px;
        overflow: hidden;
    }
    .goods_img img{
        width: 100%;
    }
    .goods_info{
        width: 50%;
        margin-left: 40px;
        display: flex;
        flex-direction: column;
    }
    .goods_info div{
        height: 40px;
        line-height: 40px;
    }
    .goods_name{
        font-size: 22px;
        font-weight: bold;
    }
    .goods_count{
        font-size: 18px;
        display: flex;
        justify-content: start;
        
    }
    .goods_count_price{
        margin-right: 20px;
        color: #dc742f;
    }
    .goods_integral p span{
        color: #ff9f03;
        font-size: 18px;
    }
    .goods_integral{
        display: flex;
        justify-content: flex-start;
    }
</style>